<template>
  <div>
    <table
      border
      :style="{ borderCollapse: 'collapse', width: width + 'px' }"
      id="table"
    >
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0000</td>
          <td>00000</td>
          <td>00000</td>
        </tr>
        <tr>
          <td>0000</td>
          <td>00000</td>
          <td>00000</td>
        </tr>
        <tr>
          <td>0000</td>
          <td>00000</td>
          <td>00000</td>
        </tr>
      </tbody>
    </table>
    <div>1111111111111111111111111</div>
  </div>
</template>
<script setup>
// // 自定义hooks：把公共的js抽离成一个单独的函数，这个函数内部使用到了vue3的一些api
// // 存入一个文件中，这个函数就叫hooks，总之自定义hooks本质上就是一个拥有特殊功能的函数
// import { onBeforeMount, onMounted, ref } from "vue";
// const width = ref(300);
// // resize事件可能会有性能问题，所以要在组件卸载后清除事件监听
// const Fn = function () {
//   console.log(document.body.offsetWidth);
//   width.value = document.body.offsetWidth - 100;
// };
// onMounted(() => {
//   // 页面一加载就渲染
//   Fn();
//   window.addEventListener("resize", Fn);
// });
// onBeforeMount(() => {
//   window.removeEventListener("resize", Fn);
// });

import { nextTick } from "vue";
import { useResize } from "../hooks/useResize";
const { width } = useResize(500);

// 延迟到下一次DOM更新之后执行回调函数
nextTick(() => {
  console.log(document.querySelector("#table"));
});
</script>

<style scoped></style>
